<template>
	<div style="position: relative;">

		<div class="one">

			<div class="header" @click="drawer_one = true">
				<span>查询SKU <i class="el-icon-search"></i></span>
			</div>

			<!-- 下拉弹框 -->
			<el-drawer size="80%" title="查找SKU" :visible.sync="drawer_one" :direction="direction">
				<el-input style="padding: 10px;" v-model="new_one" placeholder="请输入查找的SPU名称或商标话单位"></el-input>
				<el-button type="primary" v-on:click='select_sku()'
					style="display: block; width: 80%; margin: 10px auto;">
					查找SKU</el-button>
			</el-drawer>


			<div class="divContainer">

				<div class="item" style="color: #0000FF;" v-for='sku in sku_select_list'
					v-on:click="ch_one(sku.id, sku.sku_name, sku.spu_id)" :class="[sku_id === sku.id?'active': '']"
					:id="sku.id">
					<!-- <span>{{sku.value}}</span> -->

					<div>SPU:{{sku.spu_name}}</div>
					<div>商标:{{sku.brand_name}}</div>
					<div>单位:{{sku.unit_name}}</div>
					<div>所属子类:{{sku.class_name}}</div>
					<div>所属父类:{{sku.parent_name}}</div>

				</div>


				<div class="item" v-for='sku in sku_list' v-on:click="ch_one(sku.id, sku.sku_name, sku.spu_id)"
					:class="[sku_id === sku.id?'active': '']" :id="sku.id">
					<!-- <span>{{sku.value}}</span> -->
					<div>ID:{{sku.id}}</div>
					<div>SPU:{{sku.spu_name}}</div>
					<div>商标:{{sku.brand_name}}</div>
					<div>单位:{{sku.unit_name}}</div>
					<div>所属子类:{{sku.class_name}}</div>
					<div>所属父类:{{sku.parent_name}}</div>

				</div>

				<div style="height: 200px;width: 100%;"></div>

			</div>

		</div>

		<div class="two">

			<div class="header" @click="showPopup">
				<span>添加SKU属性 <i class="el-icon-circle-plus"></i></span>

			</div>

			<van-popup v-model="drawer_two" 
			position="bottom" :style="{height: '60%' }">
				<van-picker title="选择属性" 
				show-toolbar 
				:columns="columns" @confirm="onConfirm" @cancel="onCancel"
					@change="onChange" :default-index="0" />
			</van-popup>



			<div>
				<div style="overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;"
				class="item_" v-for='attribute in sku_attribute_list'>
					<span>{{attribute.attribute_key}}: {{attribute.attribute_value}}</span>
				<i class="el-icon-delete-solid" @click="del_sku_attribute(attribute.id)" @click.stop></i>
				</div>
				<div style="height: 200px;width: 100%;"></div>
			</div>

			<!-- <div style="height: 200px;"></div> -->


		</div>

		<AddSku :sku_id="sku_id" @deleteSku="deleteSku"></AddSku>
		


	</div>
</template>

<script>
	import {
		Toast
	} from 'vant'
	
	import {
		select_all_sku_url,
		select_sku_attribute_url,
		add_sku_attribute_url,
		select_spu_id_attribute_url,
		del_sku_attribute_url,
	} from "../../utils/setting.js"
	import AddSku from "./add_sku.vue"
	export default {
		name: '',
		components: {
			AddSku
		},
		props: {},
		data() {
			return {
				sku_list: [],
				sku_select_list: [],
				sku_attribute_list: [],
				spu_attribute_list: [],
				columns: [],
				sku_id: '',
				sku_name: '',
				spu_id: '',
				direction: 'ttb',
				drawer_one: false,
				drawer_two: false,
				drawer_add: false,
				new_one: '',
				attribute_id: '',

				state1: '',
			}
		},
		methods: {
			
			del_sku_attribute(sku_attribute_id){
				
				console.log(sku_attribute_id)
				console.log(this.sku_attribute_list)
				this.$axios({
					method: 'POST',
					url: del_sku_attribute_url,
					data: this.qs.stringify({ //这里是发送给后台的数据
						
						sku_attribute_id : sku_attribute_id 
				
					})
					

				}).then((response) => { //这里使用了ES6的语法
					// console.log(response) //请求成功返回的数据
					if (response.data.status == 1) {
						
						this.$notify({ type: 'success', message: '删除成功' });
						
						this.get_sku_attribute()
						
						// console.log(this.sku_attribute_list)
						
					} else {
						// console.log(response.data.errorMsg)
						this.$notify({ type: 'error', message: '危险删除，如确需删除请联系系统管理员，具体原因：' + response.data.errorMsg });
					}
				}).catch((error) => {
					console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})
			},
			
			deleteSku(data){
				this.get_all_sku()
			},
			
			showPopup() {
				
				if (this.spu_attribute_list.length == 0){
					Toast(`请选择SKU或对应的SPU没有属性`);
					return
				}
				
				this.attribute_id = this.spu_attribute_list[0].id
				this.drawer_two = true;
			},
			
			onConfirm(value, index) {
				Toast(`当前值：${value}, 当前索引：${index}`);
				// this.subject = value
				// this.subject_id = this.subject_list[index]['id']
				// this.drawer_two=false
				// this.send_to_parent()
				this.add_attribute()
			
			},
			onChange(picker, value, index) {
				Toast(`当前值：${value}, 当前索引：${index}`);
				// console.log(this.spu_attribute_list)
				console.log(this.spu_attribute_list[index])
				this.attribute_id = this.spu_attribute_list[index].id
				
				

			},
			onCancel() {
				Toast('取消');
				this.drawer_two=false
			},


			querySearch(queryString, cb) {
				var spu_attribute_list = this.spu_attribute_list;
				var results = queryString ? spu_attribute_list.filter(this.createFilter(queryString)) : spu_attribute_list;
				// 调用 callback 返回建议列表的数据
				cb(results);
			},
			createFilter(queryString) {
				return (spu_attribute_list) => {
					return (spu_attribute_list.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
				};
			},

			handleSelect(item) {
				console.log(item);
				this.attribute_id = item.id
			},


			get_spu_attribute_list(spu_id) {
				
				this.columns = []

				this.$axios({
					method: 'GET',
					url: select_spu_id_attribute_url,
					params: {
						spu_id: spu_id,
					}
				}).then((response) => { //这里使用了ES6的语法
					if (response.data.status == -1) {
						this.$message({
							message: response.data.errorMsg,
							type: 'error'
						})
						return
					}

					this.spu_attribute_list = response.data.resultBody
					
				
					// console.log(response.data.resultBody)

					for (var i = 0; i < this.spu_attribute_list.length; i++) {

						let val = this.spu_attribute_list[i]

						val['value'] = val['attribute_key'] + ':' + val['attribute_value']

						this.columns.push(val['value'])
					}

					// console.log(this.spu_attribute_list)
				}).catch((error) => {
					// console.log(error)
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})

			},

			get_sku_attribute() {
				this.$axios({
					method: 'GET',
					url: select_sku_attribute_url,
					params: {
						sku_id: this.sku_id
					}
				}).then((response) => { //这里使用了ES6的语法
					if (response.data.status == -1) {
						this.$message({
							message: response.data.errorMsg + '!!!',
							type: 'error'
						})

						return
					}

					this.sku_attribute_list = response.data.resultBody.reverse()
					// console.log(this.sku_attribute_list)
				}).catch((error) => {

					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})
			},

			add_attribute() {
				if (this.sku_id === '') {
					this.$message({
						message: '请选择一个SkU' + '!!!',
						type: 'error'
					})

					return
				}
				
				// console.log(this.sku_id)
				// console.log(this.attribute_id)


				this.$axios({
					method: 'GET',
					url: add_sku_attribute_url,
					params: {
						sku_id: this.sku_id,
						attribute_id: this.attribute_id,
						// attribute_value: this.attribute_value,
					}
				}).then((response) => { //这里使用了ES6的语法
					if (response.data.status == -1) {
						this.$message({
							message: response.data.errorMsg,
							type: 'error'
						})
						this.drawer_two = false
						return
					}

					this.$message({
						message: '属性添加成功',
						type: 'success'
					})

					//获取sku_attribute_list
					this.get_sku_attribute()
					this.drawer_two = false

				}).catch((error) => {

					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})


			},

			ch_one(sku_id, sku_name, spu_id) {

				// console.log(spu_id)
				if (spu_id != this.spu_id) {

					this.spu_id = spu_id
					this.get_spu_attribute_list(spu_id)

				}

				if (sku_id == this.sku_id) {
					return
				}
				this.sku_id = sku_id
				this.sku_name = sku_name
				// console.log(this.sku_id)
				this.get_sku_attribute()
			},

			select_sku() {
				// console.log(this.sku_list)
				// console.log(this.new_one.toLowerCase())
				this.sku_select_list = []
				for (var i = 0; i < this.sku_list.length; i++) {
					let val = this.sku_list[i]['value'].toLowerCase()
					if (val.indexOf(this.new_one.toLowerCase()) != -1) {
						// console.log(val.indexOf(this.new_one.toLowerCase()))
						this.sku_select_list.push(this.sku_list[i])
					}
				}
				
				this.drawer_one = false
			},

			get_all_sku() {
				// console.log(select_all_sku_url)
				this.$axios({
					method: 'GET',
					url: select_all_sku_url,
				}).then((response) => { //这里使用了ES6的语法

					this.sku_list = response.data.resultBody
					for (var i = 0; i < this.sku_list.length; i++) {
						let val = this.sku_list[i]['spu_name'] +
							' ' +
							'|ID:' + this.sku_list[i]['id'] +
							'|商标:' + this.sku_list[i]['brand_name'] +
							'|父类:' + this.sku_list[i]['parent_name'] +
							'|子类:' + this.sku_list[i]['class_name']

						this.sku_list[i]['value'] = val
					}

					// console.log(this.sku_list)
				}).catch((error) => {

					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})
			}


		},
		computed: {},
		watch: {},
		created() {},
		mounted() {
			this.get_all_sku()
		},
	}
</script>

<style scoped lang="less">
	.one,
	.two {
		width: 50%-0.5px;
		display: inline-block;
	}

	.one {
		// border-right: 0.5px solid black;
		position: absolute;
		left: 0px;
		top: 0px;
	}

	.two {
		// border-left: 0.5px solid black;
		position: absolute;
		right: 0px;
		top: 0px;
	}


	.header {
		height: 60px;
		line-height: 60px;
		text-align: center;
		font-size: 20px;
		background-color: floralwhite;
	}


	.item {
		background-color: #F0F0F0;
		border-bottom: 0.5px solid #F0F0F0;
		margin-bottom: 10px;

		div {
			margin-left: 5px;
		}

	}

	.item_ {
		position: relative;
		height: 40px;
		line-height: 40px;
		font-size: 20px;
		// background-color: #F0F0F0;
		border-bottom: 0.5px solid #F0F0F0;

		span {
			padding-left: 10px;
		}

		i {
			position: absolute;
			display: block;
			right: 15px;
			top: 10px;
			color: orangered;
		}

	}

	.active {
		background-color: orange;
		color: white;
	}

	.add_sku {

		height: 50px;
		width: 50px;
		position: absolute;
		font-size: 50px;
		right: 5px;
		top: 500px;
		color: red;



	}
	
	.divContainer {
		overflow: auto;
		// height: 300px;
		height: 550px;
	}
	
	.divContainer::-webkit-scrollbar {
		border-width: 1px;
	}
	

</style>
